<template>
	<view>
		<view class="searchTop flex">
			<input placeholder="搜索内容" v-model="password" />
			<image src="static/icon_clear.png" class="icon_clear"  @tap="clickCancel"></image>
			<text class="'btn_search cur" v-if="password.length>0" @tap="clickCancel">取消</text>
			<text class="btn_search" v-else @tap="clickSearch(password)">搜索</text>
		</view>
		<view class="search_resultBox" v-if="password">
			<view class="search_resultLi" v-for="(item,index) in list" @tap="clickSearch(item.text)">黎麦米</view>  
		</view>
		<view class="searchBlock" v-if="!password">
			<view class="til flex">
				<text>历史搜索</text>
				<image  src="static/icon_del.png" class="icon_del" @tap="clickClear"></image>
			</view>
			<view class="span_txt">
				<text v-for="(item,index) in historyArr">耐高温</text>
			</view>
		</view>
		<view class="searchBlock" v-if="!password">
			<view class="til flex">
				<text>搜索发现</text> 
			</view>
			<view class="span_txt">
				<text v-for="(item,index) in historyArr">耐高温</text>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	export default{
		data(){
			return{
				historyArr:[
					{},{},{},{},{},{},{},{} 
				],
				password:'',
				list:[]
			}
		},
		onLoad() {
			that = this
		},
		methods:{
			clickClear:function(){
				uni.showModal({
				    title: '提示',
				    content: '确定清空历史搜索吗？',
					confirmColor:'#06C1AE',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			clickCancel:function(){ 
				that.password =''
			},
			clickSearch:function(password){
				if(password){
					uni.navigateTo({
						url:'searchResult&password='+password
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	@import url("./css/common.css");
	page{
		background-color: #fff;
	}
	.searchBlock{
		padding: 0 20rpx 20rpx 20rpx;
	}
	.searchBlock .til{
		font-size:28rpx; 
		font-weight:bold;
		color:rgba(0,0,0,1);
		justify-content:space-between;
		padding: 20rpx 0;
	}
	.searchBlock .span_txt text{
		font-size:22rpx; 
		font-weight:500;
		color:rgba(102,102,102,1);
		background:rgba(245,245,245,1);
		height:55rpx;
		line-height: 55rpx;
		padding: 0px 20rpx;
		border-radius:28rpx;
		margin-right: 20rpx;
		display: inline-block;
		margin-bottom: 20rpx;
	}
	.icon_del{
		width: 24rpx;
		height: 24rpx;
		padding: 0 10rpx;
	}
	.searchTop{
		justify-content:space-between;
		padding: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.searchTop input{
		height:64rpx;
		width: 596rpx; 
		padding: 0 20rpx;
		background:rgba(242,242,242,1);
		border-radius:32px;
	}
	.searchTop .btn_search{
		padding: 0 5rpx;
		color: #06C1AE;
	}
	.searchTop .btn_search.cur{
		color: #666;
	}
	.searchTop .icon_clear{
		position: absolute;
		left: 616rpx;
		top:38rpx;
		width: 30rpx;
		height: 30rpx;
	}
	.search_resultBox{
		padding: 0 20rpx; 
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
	}
	.search_resultBox .search_resultLi{
		font-size:24rpx; 
		font-weight:500;
		color:rgba(153,153,153,1);
		line-height:63rpx;
		border-bottom: 1px solid rgba(241,241,241,1);
		background: url(./static/dd.png) right center no-repeat;
		background-size: 20rpx 21rpx;
	}
 
</style>
